<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词汇测试</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        var timeCount = 0;
        function timecount(){
            timeCount++;
            console.log(timeCount);
            setTimeout("timecount()",1000); //自身调用，重复执行
        }
        timecount();
        function selectAll() {

            $.ajax({
                url: 'word?cet4='+sessionStorage.getItem("cet4")+'&'+'cet6='+sessionStorage.getItem("cet6"),
                type: 'get',
                success: function (words) {
                    var str = "";
                    for (var i = 0; i < words.length ;i++)
                    {
                        str += "<div class='box'>"+"<input type='checkbox' class='word' name='word' id='word-"+words[i].wid+"' value='"+words[i].wid+"'>"+
                            "<label for='word-"+i+"'>"+words[i].word+"</label>"+"</div>";
                    }

                    document.getElementById("word_box").innerHTML=str;
                },
                error: function () {
                    alert('服务器超时，请重试！');
                }
            })
        }
        function getCookie(objName) {//获取指定名称的cookie的值
            var arrStr = document.cookie.split("; ");
            for (var i = 0; i < arrStr.length; i++) {
                var temp = arrStr[i].split("=");
                if (temp[0] == objName) return unescape(temp[1]);  //解码
            }
            return "";
        }
        selectAll();

    </script>
    <style>
         body{
            background-image: url(../static/images/page4.1.jpg);
			position: relative;
			height: 600px;
			background-repeat: no-repeat;
			background-color: #008081;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        #word_box{
                position: relative;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				width: 924px;
				height: 630px;
				overflow-y: scroll;
				overflow-x: hidden;
				top: 199px;
				left: 363px;
				border: 3px;
				/* border-width: 1px 2px 1px; */
				border: 3px solid #c0c0c0;
	
        }
        .box{
            width: 223px;
            height: 60px;
            font-size:20px;
        }
        #btn{
            width: 160px;
			height: 80px;
			position: relative;
			top: 120px;
			left: 1320px;
        }
        #word{
            width: 60px;
            height: 60px;
        }
    </style>
    
</head>
<body>
    <header>

    </header>
    <div id="big_box">
        <div id="word_box">

        </div>
        <input  id="btn" type="image" value="提交" onclick="getWord();getNewWord();timestop();" src="../static/images/page4.2.png">
    </div>

    <script>
        // var json = {
        // "code": 200,
        // "msg": "get test",
        //     frequency: []
        // };
        var wid=new Array();
        var total=new Array();
        var unknow=new Array();
        //实际情况中，json对象的值可通过document.getElementByName()来获取用户输入
        function getWord() {

        }
        function getCookie(objName) {//获取指定名称的cookie的值
            var arrStr = document.cookie.split("; ");
            for (var i = 0; i < arrStr.length; i++) {
                var temp = arrStr[i].split("=");
                if (temp[0] == objName) return unescape(temp[1]);  //解码
            }
            return "";
        }

        var str;
        function timestop(){
            // alert(timeCount);
            // var s=parseInt(timeCount/3600);
            var f=parseInt(timeCount/60%60);
            var m=Math.ceil(timeCount%60);
            // str=s+"时"+f+"分"+m+"秒";
            str=f+"分"+m+"秒";
            sessionStorage.setItem("time",str);
            clearTimeout(timeCount);  //停止执行
            s=timeCount;
            sessionStorage.setItem("second",s);


            //获取所有的表单选项
            var arr = document.getElementsByName("word");
            for (i in arr) {
                //检测是否勾取
                total.push(arr[i].value);
                if (arr[i].checked) {  //勾上了
                    wid.push(arr[i].value);
                }
                else
                {
                    unknow.push(arr[i].value);
                }
            }
            // json.id=getCookie('id');
            // var a = JSON.stringify(json);
            // alert(a);
            var json={
                "total":total,
                "wid":wid,
                "unknow":unknow
            }
            // alert(JSON.stringify(json));
            //传递到后台
            $.ajax({
                type: 'POST',
                data: JSON.stringify(json), //json
                contentType: 'application/json',
                dataType: 'json',
                url: 'getresult?username='+sessionStorage.getItem("username")+'&time='+str+'&second='+s,
                success: function (data) {
                    if(data['flag']==1)
                    {
                        sessionStorage.setItem("result",data['res']);
                        window.location.href="result";
                    }

                },
                error: function (e) {
                    alert("发送失败");
                }
            });




        }

        var unknow=new Array();
        function getNewWord() {
            //获取所有的表单选项
            var ar = document.getElementsByName("word");
            for (i in ar) {
                //检测是否勾取
                total.push(ar[i].value);
                if (!ar[i].checked) //勾上了
                    unknow.push(ar[i].value);
            }
            var json={
                "unknow":unknow
            }
            $.ajax({
                type: 'POST',
                data: JSON.stringify(json), //json
                contentType: 'application/json',
                dataType: 'json',
                url: 'myword?uid='+sessionStorage.getItem("uid"),
                success: function (data) {
                    if(data['flag']=="success")
                    {
                        // alert(data['msg']);
                    }
                },
                error: function () {
                    alert("发送失败");
                }
            });
        }
    </script>
</body>
</html>
